<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电商1( rem布局 )</title>
    <script src="./js/rem.js"></script>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/dianshang1(rem).css">
    <link rel="stylesheet" href="./css/dianshang2(rem).css">
</head>

<body>
    <div class="topbar">
        <a class="topbar-left" href="#">
            <i class="iconfont icon-saoyisao"></i>
            <span>扫一扫</span>
        </a>
        <div class="search">
            <i class="iconfont icon-sousuo"></i>
            <input type="text" placeholder="新一代V3.0智能手环发售">
        </div>
        <a href="#">
            <img src="./img/1_03.png" alt="">
        </a>
        <a class="topbar-right" href="#">
            <i class="iconfont icon-xiaoxi"></i>
            <span>消息</span>
        </a>
    </div>
    <div class="header">
        <div class="header-menu">
            <span>推荐：</span>
            <span class="bg">春装</span>
            <span class="bg">女装</span>
            <span class="bg">男装</span>
            <span class="bg">母婴</span>
            <span class="bg">美食</span>
            <span class="bg">包包</span>
            <span class="bg">美容美妆</span>
        </div>
        <div class="header-banner">
            <a class="banner" href="#">
                <img src="./img/综合电商app1_03.png" alt="">
            </a>
            <div class="dots">
                <a class="dot active" href="#"></a>
                <a class="dot" href="#"></a>
                <a class="dot" href="#"></a>
                <a class="dot" href="#"></a>
                <a class="dot" href="#"></a>
                <a class="dot" href="#"></a>
                <a class="dot" href="#"></a>
                <a class="dot" href="#"></a>
            </div>
        </div>
        <div class="use">
            <div class="use-top">
                <a href="#">
                    <img src="./img/综合电商app1_07.png" alt="">
                    <span>超市便利</span>
                </a>
                <a href="#">
                    <img src="./img/综合电商app1_09.png" alt="">
                    <span>限时抢购</span>
                </a>
                <a href="#">
                    <img src="./img/综合电商app1_12.png" alt="">
                    <span>9.9包邮</span>
                </a>
                <a href="#">
                    <img src="./img/综合电商app1_15.png" alt="">
                    <span>每日生鲜</span>
                </a>
                <a href="#">
                    <img src="./img/综合电商app1_17.png" alt="">
                    <span>母婴宝贝</span>
                </a>
            </div>
            <div class="use-bottom">
                <a href="#">
                    <img src="./img/综合电商app1_24.png" alt="">
                    <span>餐饮娱乐</span>
                </a>
                <a href="#">
                    <img src="./img/综合电商app1_26.png" alt="">
                    <span>外卖出行</span>
                </a>
                <a href="#">
                    <img src="./img/综合电商app1_27.png" alt="">
                    <span>全球淘宝</span>
                </a>
                <a href="#">
                    <img src="./img/综合电商app1_30.png" alt="">
                    <span>数码家电</span>
                </a>
                <a href="#">
                    <img src="./img/综合电商app1_31.png" alt="">
                    <span>签到有礼</span>
                </a>
            </div>
            <div class="dots">
                <a class="dot active" href="#"></a>
                <a class="dot" href="#"></a>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="hot">
            <a href="#" class="hot-text">
                <span class="headline">头条<span class="red">快讯</span></span>
                <span class="bg">精选</span>
                <p>全新一代千库V3.0智能手环正式发售监测...</p>
                <span class="vertical">|</span>
                <span class="more">更多</span>
            </a>
        </div>
        <div class="circum">
            <a class="circum-title">
                <span class="head">发现周边</span>
                <span class="black">1</span>:
                <div class="black">34</div>:
                <div class="black">20</div>
                <span class="default">下场等待开启 | 12:00</span>

            </a>
            <a class="" href="#">
                更多优惠
            </a>
        </div>
        <div class="goods">
            <div class="goods-left">
                <div class="title">
                    <img src="./img/1_11.png" alt="">
                    <span>限时秒杀</span>
                </div>
                <span>每场特价</span>
                <img src="./img/1_07.png" alt="">

                <a class="btn" href="#">立即抢购</a>
            </div>
            <div class="goods-center">
                <div class="title">
                    <img src="./img/1_13.png" alt="">
                    <span>发现好货</span>
                </div>
                <span>精选良品</span>
                <img src="./img/1_25.png" alt="">
                <a class="btn" href="#">立即抢购</a>
            </div>
            <div class="goods-right">
                <div class="goods-top">
                    <div class="goods-text">
                        <strong>
                            <img src="./img/1_16.png" alt="">
                           <span>9.9包邮</span> 
                        </strong>
                        <span>天天特价</span>
                        <a class="btn" href="#">立即抢购</a>
                    </div>
                    <span class="img">
                        <img src="./img/1_22.png" alt="">
                    </span>
                </div>
                <div class="goods-bottom">
                    <div class="goods-text">
                        <strong>
                            <img src="./img/1_29.png" alt="">
                           <span>品牌折扣</span> 
                        </strong>
                        <span>优惠打折</span>
                        <a class="btn" href="#">立即抢购</a>
                    </div>
                    <span class="img">
                        <img src="./img/1.png" alt="">

                    </span>
                </div>
            </div>
        </div>
        <div class="boom">
            <h3>大家都在抢</h3>
            <div class="discounts">
                <a href="#">
                    <span class="color">新人专享</span>
                    <span class="small">领券更优惠</span>
                </a>
                <a href="#">
                    <span class="color">新品首发</span>
                    <span class="small">大牌云集</span>
                </a>
                <a href="#">
                    <span class="color">清仓甩卖</span>
                    <span class="small">品类多价格低</span>
                </a>
                <a href="#">
                    <span class="color">0元适用</span>
                    <span class="small">每场特价</span>
                </a>
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="list">
            <a class="list-title" href="#">
                <span class="blod">今日热销榜</span>
                <span class="small">更多优惠</span>
            </a>
            <div class="shopping">
                <div class="shopping-left">
                    <div class="time">
                        <div class="time-left">
                            <span class="color">专价预售</span>
                            <span class="small">领券更优惠</span>
                        </div>
                        <div class="time-right">
                            <span>
                                <span class="black">1</span>:
                            <span class="black">34</span>:
                            <span class="black">20</span>
                            </span>
                            <span class="small">下一场 | 12:00</span>
                        </div>
                    </div>
                    <div class="shop">
                        <div class="shop-left">
                            <img src="./img/1_07.png" alt="">
                            <a class="rbg" href="#">疯狂价</a>
                            <span class="red">￥80</span>
                        </div>
                        <div class="shop-center">
                            <img src="./img/鸡腿.png" alt="">
                            <a class="rbg" href="#">疯狂价</a>
                            <span class="red">￥9.9</span>
                        </div>
                        <div class="shop-right">
                            <img src="./img/键盘.png" alt="">
                            <a class="rbg" href="#">疯狂价</a>
                            <span class="red">￥14</span>
                        </div>
                    </div>
                </div>
                <div class="shopping-right">
                    <div class="eat">
                        <a class="fruits" href="#">
                            <span class="color">鲜美生鲜</span>
                            <img src="./img/水果.png" alt="">
                        </a>
                        <a class="food" href="#">
                            <span class="color">试吃美食</span>
                            <img src="./img/试吃.png" alt="">
                        </a>
                    </div>
                    <div class="infant">
                        <a class="baby" href="#">
                            <span class="color">母婴生活馆</span>
                            <img src="./img/婴乳产品.png" alt="">
                        </a>
                        <a class="milk-powder" href="#">
                            <span class="color">进口奶粉</span>
                            <img src="./img/奶粉.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
            <div class="list-bottom">
                <a class="clothes" href="#">
                    <strong>女装会场</strong>
                    <span class="small">23093人气</span>
                    <img src="./img/女装.png" alt="">
                </a>
                <a class="cosmetics" href="#">
                    <strong>美妆会场</strong>
                    <span class="small">23093人气</span>
                    <img src="./img/美妆.png" alt="">
                </a>
                <a class="techno" href="#">
                    <strong>数码会场</strong>
                    <span class="small">23093人气</span>
                    <img src="./img/摄影.png" alt="">
                </a>
                <a class="electrical" href="#">
                    <strong>家电会场</strong>
                    <span class="small">23093人气</span>
                    <img src="./img/1_25.png" alt="">
                </a>
            </div>
        </div>
        <div class="ad">
            <a href="#">
                <img src="./img/领取红包.png" alt="">
            </a>
        </div>
        <div class="tasty"></div>
        <div class="feature"></div>
    </div>
    <!-- <div class="tapbar">
        <a href="#">
            <i class="iconfont icon-shouye"></i>
            <span>首页</span>
        </a>
        <a href="#">
            <i class="iconfont  icon-fenlei"></i>
            <span>分类</span>
        </a>
        <a href="#">
            <i class="iconfont icon-faxian"></i>
            <span>发现</span>
        </a>
        <a href="#">
            <i class="iconfont icon-gouwuche"></i>
            <span>购物车</span>
        </a>
        <a href="#">
            <i class="iconfont icon-wode"></i>
            <span>我的</span>
        </a>
    </div> -->
</body>

</html>